<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>老师界面-课程列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- Le styles -->
		<link href="resources/css/bootstrap.css" rel="stylesheet">
		<link href="resources/css/styles.css" rel="stylesheet">
		<link href="resources/css/bootstrap-responsive.css" rel="stylesheet">
		<script src="resources/js/jquery-1.7.1.min.js"></script>
		<script src="resources/js/jquery.ui.datepicker-zh-CN.js"></script>
		<script src="resources/js/jquery-ui-1.9.2.custom.min.js"></script>
		<script>
	$(function() {
		$('#tea_dlg').dialog({
			autoOpen : false,
			bgiframe : true,
			modal : true,
			resizable : false,
			title : "详细信息"
		});
		//增加
		$("button").click(function() {

			$.ajax({
				url : "showAddCourse.do",
				type : "get",
				dataType : "json",
				success : function(json) {
					$(".teaId").val($.trim(json));
				}
			});
			$('#tea_dlg :input').val("");
			$('#tea_dlg').dialog({
				'buttons' : {
					'确定' : function() {
						$("#tea_form").submit();
					},
					'取消' : function() {
						$(this).dialog('close');
					}
				}
			}).dialog('open');
		});
		//更新
		$(".update").click(function() {
			var tr = $(this).closest("tr");
			//打开dlg时候回传该条数据
			$.ajax({
				url : "showpop.do",
				type : "post",
				data : {
					"c_id" : tr.data("bh")
				},
				dataType : "json",
				success : function(json) {
					$(".name").val($.trim(json.CName));
					$(".type").val($.trim(json.CType));
					$(".time").val($.trim(json.time));
				}
			});

			$('#tea_dlg').dialog({
				'buttons' : {
					'确定' : function() {
						$.ajax({
							url : "updateCourse.do",
							type : "post",
							data : {
								"bh" : tr.data("bh"),
								"name" : $(".name").val(),
								"type" : $(".type").val(),
								"time" : $(".time").val(),
								"tid" : $(".teaId").val()
							},
							dataType : "json",
							success : function(json) {
								if (!json) {
									alert("更新失败！");
								} else {
									window.location.reload();
								}
							}
						});
						$(this).dialog('close');
					},
					'取消' : function() {
						$(this).dialog('close');
					}
				}
			}).dialog('open');
		});
		//查看
		$(".search").click(function() {
			var tr = $(this).closest("tr");
			var cid = tr.data("bh");
			var tid = $(".teaId").val();
			var url="showuser.do?cid="+cid+"&tid="+tid;
			window.open(url);
		});
		//显示选择时间控件
		$('.time').datepicker({
			changeMonth : true,
			changeYear : true
		});
	});
</script>
	</head>

	<body>
		<input type="hidden" class="teaId" value="${tid}">
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container-fluid">
					<button type="button" class="btn btn-navbar" data-toggle="collapse"
						data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="brand" href="#">选课系统</a>
					<div class="nav-collapse collapse">
						<ul class="nav">
							<li>
								<a href="#">教师主页</a>
							</li>
						</ul>
					</div>
					<!--/.nav-collapse -->
					<form class="navbar-search pull-right" action="">
						<input class="search-query span2" type="text" placeholder="Search">
					</form>
					<ul class="nav pull-right">
						<li class="divider-vertical"></li>
						<li class="dropdown">
							<a data-toggle="dropdown" class="dropdown-toggle" href="#">${yhm}
								<b class="caret"></b> </a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Action</a>
								</li>
								<li>
									<a href="#">Another action</a>
								</li>
								<li>
									<a href="#">Something else here</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="#">Separated link</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="main" style="width: 1000px; margin: 0px auto;">
			<b>课程列表</b>
			<hr />
			<div id="course_select_list">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th style="width: 50px;">
								编号
							</th>
							<th style="width: 150px;">
								课程名
							</th>
							<th style="width: 50px;">
								类型
							</th>
							<th style="width: 50px">
								时间
							</th>
							<th style="width: 50px">
								操作
							</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${courseList}" var="course" varStatus="p">
							<tr data-bh="${course.CId}">
								<td>
									<a href="#">${p.count}</a>
								</td>
								<td>
									<a href="#">${course.CName}</a>
								</td>
								<td>
									<a href="#"> <c:if test="${course.CType==0}">必修课</c:if> <c:if
											test="${course.CType==1}">选修课</c:if> </a>
								</td>
								<td>
									<a href="#">${course.time}</a>
								</td>
								<td>
									<input type="image" src="resources/css/img/search.png"
										class="search" value="查看" style="width:18px;margin-right:10px" />
									<input type="image" src="resources/css/img/mod.png"
										class="update" value="修改" alt="修改"  />
								</td>
							</tr>
						</c:forEach>

					</tbody>
				</table>
			</div>
			<button style="width: 100px; height: 35px; float: right">
				<b>增加课程</b>
			</button>
			<div id="tea_dlg">
				<form id="tea_form" action="addcourse.do" method="post">
					<table class="table table-bordered table-striped">
						<tr>
							<th>
								课程名称
							</th>
							<td>
								<input type="hidden" name="tid" class="teaId" value="${tid}">
								<input type="text" name="name" class="name" />
							</td>
						</tr>
						<tr>
							<th>
								课程类型
							</th>
							<td>
								<select name="type" class="type" style="width:220px">
									<option value="0">
										必修课
									</option>
									<option value="1">
										选修课
									</option>
								</select>
							</td>
						</tr>
						<tr>
							<th>
								时间
							</th>
							<td>
								<input type="text" name="time" class="time"
									width="100px" />
							</td>
						</tr>

					</table>
				</form>
			</div>
		</div>

	</body>
</html>